<template>
  <music-list
    :bgImage="bgImage"
    :songs="songs"
    :title="title"
    ></music-list>
</template>

<script>
import { mapGetters } from 'vuex'
import { getSingerDetail } from 'api'
import musicList from 'components/music-list/music-list'
export default {
  name: 'SingerDetail',
  components: {
    musicList
  },
  data () {
    return {
      bgImage: '',
      songs: [],
      title: ''
    }
  },
  computed: {
    ...mapGetters([
      'singer'
    ])
  },
  created () {
    // console.log('The singer is: ', this.singer)
    if (this.singer.singer_name) {
      this._getSingerDetail(this.singer.singer_name)
      this.bgImage = this.singer.singer_pic
      this.title = this.singer.singer_name
    } else {
      this.$router.push({
        path: '/singer'
      })
    }
  },
  methods: {
    _getSingerDetail (key) {
      getSingerDetail({
        key,
        rn: 30
      }).then(data => {
        // console.log(data)
        if (data) {
          this.songs = data.list.map((item) => {
            const { album, albumpic, name, rid, artist, duration } = item
            return {
              album,
              albumpic,
              name,
              artist,
              rid,
              duration
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
